<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- AJAX：async javascript and xml
		
		异步：一件没有完成可以同时去做另一件事情
		后台数据格式：xml -->
		
	    发送ajax: open with live server-----http/https
	
		
		发送ajax请求：(请求头+请求体)
	    服务器端响应：（响应头+响应体）
		
		方法：
		open() 建立链接
		getAllResponseHeaders() 获取响应头的全部信息
		send() 发送数据
		
		事件：
		onreadystatechange 注册侦听
		
		属性：
		readyState 状态值 0-4
	    status 状态码  1XX---5XX
		response 响应体  服务器是甚麽格式就是什么格式
		responseText 响应体 服务器格式是字符串
		responseXML 响应体  服务器格式是xml
		responseType（了解） 存储服务器返回数据的格式  
		空字符串{默认}、“arraybuffer”、“blob”、“document”、“json”、“text” 
		这些格式就是服务器支持的返回给客户端的数据格式
		
		<script>
			//创建核心对象--很多属性和方法
			var xhr=new XMLHttpRequest();
			console.log(xhr);
			
			xhr.open("get","http://localhost:8888/api/swiper");
			//xhr.open("get","one.xml");
			
			//method 请求方式（接口文档）：
			//get类：get 一般用于获取数据/ delete 一般用于删除数据/head 获取响应头部信息
			//       options 询问支持的方式（试探性的请求）
			//post类：post 一般用于提交数据/ put 一般用于修改（更新）数据/ patch 对更新过的数据更新
			
			//url 请求网址 (接口文档): baseUrl+url
			
			//同步还是异步： 默认 异步 true  /  false 同步
			
			xhr.onreadystatechange=function(){//获取响应头部的日期
				// //获取响应头部信息
				// if(xhr.readyState===2){
				//     //请求成功 2开头或3开头都是成功
				// 	if(xhr.status>=200&&xhr.status<400){
				// 		 console.log(xhr.getAllResponseHeaders())
				// 	}
				// }
				
				//获取响应体信息
				if(xhr.readyState===4){
				    //请求成功 2开头或3开头都是成功
					if(xhr.status>=200&&xhr.status<400){
						 console.log(xhr.response);
					}
				}
			}
			//readyState 0,1,2,3,4 状态值
			// 0: 创建出实例对象xhr
			// 1: 执行open方法，建立链接后
			// 2: 响应头信息已经返回
			// 3: 响应主体正在处理
			// 4：响应主体信息已经返回
			
			//status  状态码
			// 1XX: 信息响应类, 服务器接收到请求，正在处理
			// 2XX: 成功响应类, 服务器已经成功给返回数据
			// 3XX: 重定向响应类, 为了完成，要进一步处理
			// 4XX: 客户端错误
			// 5XX: 服务器错误
			
			// 200:OK,
			// 302:缓存,
			// 404:找不到页面
			
			xhr.send(null);
		</script>
	</body>
</html>
